<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .main-container {
            font-family: SF-UI-Text-Regular;
            width: 13cm;
            margin: 0 auto;
            padding: 20px;
            background-color: #D3D3D3;
        }

        .float-left {
            float: left;
        }

        .float-right {
            float: right;
            text-align: right;
        }

        .section {
            /*border: 1px solid #CCC;*/
            /*padding: 20px;*/
            padding-Top: 20px;
            margin-bottom: 16px;
            margin-Top: 20px;
        }

        .section-details p {
            color: #126089;
            /*font-size: 16px;*/
        }

        .grouper {
            overflow: hidden;
        }

        .grid-50 {
            width: 47%;
        }

        @font-face {
            font-family: 'SF-UI-Text-Regular';
            src: url("https://s3-ap-southeast-1.amazonaws.com/content.staging.whitecoat.global/PDF/Templates/fonts/SF-UI-Text-Regular.otf");
            font-style: normal;
        }

        h1 {
            font-size: 22px;
            font-family: 'SF-UI-Text-Regular';
        }

        .h1-main {
            margin-top: 90px;
        }

        p {
            margin: 0 0 10px 0;
            font-family: 'SF-UI-Text-Regular';
            font-size: 15px;
        }

        .p-spec {
            color: #149a9a;
            font-weight: bold;
        }

        .margin-b-30 {
            margin-bottom: 30px;
        }
        .medicationItem{
            display: flex;
            justify-content: space-between;
        }
        .medicationItem .medicationItemButton{
            display: inline-block;
            background-color: #336699;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
<div class="main-container">
    <div style="display:${data.visible!};margin-bottom: 10px">
        <p style='font-weight: bold'>${data.partnershipWithText!}</p>
        <img src="https://s3-ap-southeast-1.amazonaws.com/content.staging.whitecoat.global/PDF/Templates/Images/logo_whitecoat_v2.png">
    </div>
    <div style="background-color: #fff;padding: 20px;">
        <div class="main-header grouper">
            <div style="margin-bottom: 13px">
                <img style="max-width:250px;max-height: 150px;margin-bottom: 13px" src="${data.doctorClinicLogo!}"
                     class="float-left">
                <div class="float-right">
                    <h1>${data.prescriptionText!}</h1>
                </div>
            </div>
        </div>
        <div class="grouper section">
            <div class="grid-30 float-left" style="margin-right: 15px;">
                <P>${data.idNoText!}:</P>
                <P>${data.nameText!}:</P>
                <P style="display:${data.visibleForIndonesia!};">${data.ageText!}:</P>
                <P>${data.visitDateText!}:</P>
                <P>${data.consultationNoText!}:</P>
                <P style="display:${data.visibleGAPReceiptNumber!};">GoApotik Ref.:</P>
                <P style="display:${data.visibleAddress!};">${data.addressText!}:</P>
            </div>
            <div style="display:table;vertical-align: top">
                <P><strong>${data.idNo!}</strong></P>
                <P><strong>${data.name!}</strong></P>
                <P style="display:${data.visibleForIndonesia!};"><strong>${data.age!}</strong></P>
                <P><strong>${data.visitDateStr!}</strong></P>
                <P><strong>${data.consultationNo!}</strong></P>
                <P style="display:${data.visibleGAPReceiptNumber!};"><strong>${data.goApotikReceiptNumber!}</strong></P>
                <P style="display:${data.visibleAddress!};"><strong>${data.address!}</strong></P>
            </div>
        </div>
        <div class="main-body" style="background-color:white">
            <div class="grouper">
                <div class="section" style="border-Top: 2px dotted #D3D3D3;display:${data.visibleCountryRemark!}">
                    <div style="text-align:left;"><p>${data.countryRemarkValue!}</p></div>
                </div>
                <div class="section" style="border-Top: 2px dotted #D3D3D3;">
                    <p style="margin-bottom: 10px"><strong>${data.whiteCoatPrescriptionText!}</strong></p>
                </div>
                <#list data.medicationsList as item>
                    <P><strong>${item.productName!}</strong></P>
                    <div class="medicationItem">
                        <div>
                            <p>${item.fulfillDescription!}</p>
                            <p>${item.frequencyDescription!}</p>
                            <p>${item.takeCompleteCourse!}</p>
                            <p>${item.anyPrecautions!}</p>
                            <p>${item.whatIsFor!}</p>
                        </div>
                        <button class="medicationItemButton" style="color: ${data.statusColor!}">${item.statusLabel!}</button>
                    </div>
                </#list>
<#--                ${data.prescription!}-->
<#--                ${data.packagePrescription!}-->
                <div class="section" style="margin-bottom: 0px;">
                    <img style="margin-bottom: 10px;" src="${data.doctorSign!}" width="150"><br>
                    <p style="margin-bottom: 5px;">${data.doctorName!}</p>
                    <p style="margin-bottom: 10px;">${data.consultationEndDateStr!}</p>
                    <br>
                    <p style="margin-bottom: 0px;display:${data.visibleMCRNo!};">${data.MCRNoText!}: ${data.MCRNo!}</P>
                    <br>
                    <p style="margin-bottom: 5px;">${data.footNote!}</p>
                </div>
            </div>
        </div>
    </div>
    <div style="padding: 20px 0 0 20px;color: #696969">${data.doctorClinicAddress!}</div>
    <div style="padding: 20px 0 0 20px;color: #696969;display:${data.visiblePharmacyAddress!};">201 Henderson Road | Apex @
        Henderson | #05-11/12 | Singapore 159545 | T: +65 6909 6609 | F: +65 6909 6606 | E: contactus@whitecoat.global
    </div>
</div>
</body>
</html>